import React,{Component} from 'react';
import {Modal,Button} from 'antd';

import './UploadImg.css';

class UploadImg extends Component{
    constructor(props){
        super(props);
        this.state={
            visible:true
        };
    }

    render() {
        const {visible}=this.state;
        return(
            <div>
                <Button onClick={()=>this.handleShowModal(true)} icon={'upload'}>选择图片</Button>
                <Modal
                    title="图片库"
                    visible={visible}
                    className={'uploadImgModal'}
                    onOk={this.handleOk}
                    maskClosable={false}
                    onCancel={()=>this.handleShowModal(false)}
                >
                    <div className={'uploadImgContainer'}>
                        <div className={'uploadImgContainerLeft'}>
                            <div className={'groupItem'}>
                                全部
                            </div>
                            <div className={'groupItem'}>
                                未分组
                            </div>
                        </div>
                        <div className={'uploadImgContainerRight'}>
                            bbb
                        </div>
                    </div>
                </Modal>
            </div>
        )
    }

    /**
     * 处理模态框显示和隐藏
     * @param visible
     */
    handleShowModal(visible){
        this.setState({visible});
    }
}

export default UploadImg;
